<template>
  <div>
		<!-- <navbar title="车型列表" :disabled='true'></navbar> -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      show-action
      @search="onSearch"
      style="position:fixed;top:46px;width:10rem;"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>

    <div class="carlist" >
     <van-radio-group v-model="radio">
      <van-cell-group>
        <!--eslint-disable-->
        <van-cell title="单选框 1"  v-for="(item,index) in carModelList" :key="index" clickable @click="radio = index" >
         
          <template slot="title" >
            <div style="display:flex;">
                <van-radio :name="index" style="width:1rem;"/>
               <div style="width:8rem;">
                 	<span class="van-cell-text"> {{item.brand}} {{item.modelName}} {{item.derailleurType}} {{item.seatCount}}座 排量{{item.displacement}}</span>
                  <br><span style="font-size:0.33rem;color:rgba(0,0,0,0.8);">新车参考价：{{item.price}} 元</span>
               </div>
						
						
            </div>
              
            
						</template>
        </van-cell>

      </van-cell-group>
    </van-radio-group>
    </div>

    <div class="btnCon"> 
      <van-button size="large" type="default" @click="getCar">提交</van-button>
    </div>
  </div>
</template>

<script>
import navbar from "../components/navbar.vue";
import axios from 'axios'
import Vue from'vue'
import { Toast } from 'vant';

Vue.use(Toast);
export default {
  components: { navbar },
  data() {
    return {
      value:'',
      licenseNo:'',
      frameNo:'',
      licenseDate:'',
      engineNo:'',
      Address:'',
      cityCode:'',
      //车型列表
      carModelList:[],
      radio: '',
      chgOwnerFlag:''
    }
  },
  mounted(){
      
     if(this.$route.query.clpp){
          this.value = this.$route.query.clpp
      }
       if(this.$route.query.licenseNo){
          this.licenseNo = this.$route.query.licenseNo
      }
       if(this.$route.query.frameNo){
          this.frameNo = this.$route.query.frameNo
      }
       if(this.$route.query.engineNo){
          this.engineNo = this.$route.query.engineNo
      }
       if(this.$route.query.licenseDate){
          this.licenseDate = this.$route.query.licenseDate
      }
        if(this.$route.query.Address){
          this.Address =this.CTim( this.$route.query.Address)
      }
        if(this.$route.query.cityCode){
          this.cityCode =this.CTim( this.$route.query.cityCode)
          console.log(this.cityCode)
      }
       if (this.$route.query.chgOwnerFlag) {
      this.chgOwnerFlag = this.$route.query.chgOwnerFlag;
    }
      this.toDrLi()
  },
  methods: {
      CTim:function(str) { 
        return str.replace(/\s/g,''); 
      },
      getCar:function(){
        console.log(this.radio)
        if(this.radio === ''){
           Toast('请选择车型');
           return
        }
        console.log(this.carModelList[this.radio])
        var data = this.carModelList[this.radio]
         this.$router.push({
          name: "DrivingLicense",
          query: {
            value:this.value,
            carModelId:data.carModelId,
            licenseDate:this.licenseDate,
            frameNo:this.frameNo,
            engineNo:this.engineNo,
            Address:this.Address,
            cityCode:this.cityCode,
            licenseNo:this.licenseNo,
            chgOwnerFlag:this.chgOwnerFlag
          }
        });
      },
     toDrLi:function(){
       
      if(this.licenseNo == ''){
        Toast('请输入车牌号');
      }else{
          this.post({
            "licenseNo": this.licenseNo,
              "merchantName": "taishan",
              "functionName": "VehicleType"
            },
             "api/services/app/car/VehicleType"
         )
          .then((res)=>{

             console.log(res.data.result.vehicleTypes);
            // console.log(res.data.status);
            // return;
            if(res.data.success == true){
                var data = res.data.result
                 data.vehicleTypes.map((item) => {
                  item.brand = item.brandName
                  item.modelName = item.parentVehName
                  item.derailleurType = item.gearboxType
                  item.seatCount = item.seat
                  item.displacement = item.engineDesc
                  item.price = item.newCarPrice
                  item.carModelId = item.localModelCode
                })
                console.log(data.vehicleTypes)
               this.carModelList = data.vehicleTypes
            }
              // console.log(res.data.data)
              // var data = res.data.data
            
              
              //   console.log( data.vehicleList)
              // for(let i=0;i< data.vehicleList.length;i++){
              //   console.log( data.vehicleList[i].brandName = brand)
              // }
             
          })
      }
     
      
    },
   onSearch:function(){
     this.radio=''
     this.post(
            {
              "modelName":this.value,
              "merchantName": "taishan",
              "functionName": "SearchCar"
            }
           , "api/services/app/car/SearchCar")
          .then((res)=>{
            console.log(res)
              if(res.data.success == true){
                  // console.log(1)
                  this.carModelList = res.data.result.cars
                  console.log(this.carModelList)
              }else{
                console.log(2)
                Toast.fail('暂无信息')
              }
          })
   }
  }
};
</script>
<style scoped lang="scss">
  .btnCon{
    width: 10rem;
    position: fixed;
    bottom: 0;
    background: #fff;
  }
  .carlist{
    position: relative;
    top:90px;
    margin-bottom: 50px;
  }
</style>